<template>
    <div class="message">
        <van-nav-bar title="消息" />
        <div class="message_list">
            <div class="list_item" v-for="(item, index) in messageList" :key="index">
                <van-image round width="40" height="40" :src="item.avatar" />
                <div class="title">
                    <div class="name">{{ item.name }}</div>
                    <div class="desc">{{ item.desc }}</div>
                </div>
                <div class="time">{{ item.time }}</div>
            </div>
        </div>
    </div>
</template>

<script setup>
const messageList = [
    {
        name: '食品旗舰店',
        desc: '您有一条新消息',
        avatar: '/src/assets/images/avatar1.jpg',
        time: '10分钟前'
    },
    {
        name: '水果旗舰店',
        desc: '亲爱的果粉',
        avatar: '/src/assets/images/avatar2.jpg',
        time: '星期二'
    },
    {
        name: '订阅号消息',
        desc: '您有一条新消息',
        avatar: '/src/assets/images/avatar3.png',
        time: '10分钟前'
    },
    {
        name: '消息号内容',
        desc: '您有一条新消息',
        avatar: '/src/assets/images/avatar4.png',
        time: '10分钟前'
    }
]
</script>
<style scoped>
.message_list {
    display: flex;
    flex-direction: column;
}

.list_item {
    padding: 15px 10px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    column-gap: 10px;
}

.list_item .time {
    margin-left: auto;
    color: #555;
}

.list_item .title {
    display: flex;
    flex-direction: column;
    row-gap: 8px;
}

.title .desc {
    color: #555;
    font-size: 12px;
}
</style>